<!DOCTYPE html>
<html>
<head xmlns:th="http://www.thymeleaf.org"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/material-icons.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue-min.js"></script>
    <title>分类</title>
    <style>
        #logo > img{
            width: 50%;
            height: 80%;
        }

        #navbarSupportedContent  > #title-hover > li > a {
            text-decoration: none;
            transition: all 0.5s;
        }
        #navbarSupportedContent > #title-hover > li > a:hover{
            padding-left: 20px;
        }
        #navbarSupportedContent  span{
            font-size: 25px;
            padding-left: 20px;
        }
        .categories > li {
            display: inline-block;
            margin-left: 10px;
        }

        .container {
            margin-top: 20px;
        }

        /*music 格子*/

        .music-panel > .header {
            position: relative;
        }

        .music-panel > .header > div {
            background-color: rgba(59, 62, 62, 0.7);
            position: absolute;
            bottom: 0px;
            width: 100%;
            color: white;
        }

        .music-panel > .header > img {
            width: 100%;
            height: 100%;
        }

        .music-panel > .header > div > span {
            font-size: 0.8rem;
            text-align: center;
            vertical-align: center;
        }

        .content {
            font-size: 14px;
            font-family: '楷体';
        }

        .music-panel-row {
            margin-top: 2rem;
        }

        #divider {
            height: 2px;
            background-color: #0c5460;
            border-radius: 50px;
            margin-bottom: 10px;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light border-danger" id="nav-title">
    <div id="logo" class="col-md-2" style="text-align:center;">
        <img src="/static/img/logo.png">
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul id="title-hover" class="navbar-nav mr-auto">
            <li class="nav-item active">
                <span class="nav-link">大象云音乐</span>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/"> <span>首页</span></a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/user/profile"> <span>我的音乐</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><span>推荐歌单</span></a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0" action="/search">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" name="key" aria-label="Search">
        </form>
        <ul class="navbar-nav" id="log-btns">
            <li class="nav-item" th:if="${session.user == null}">
                <a class="btn btn-primary" data-toggle="modal" data-target="#loginModel">登录</a>
            </li>
            <li class="nav-item" th:if="${session.user == null}">
                <a class="btn btn-link" href="/sign/page">注册</a>
            </li>
            <li class="nav-item" th:if="${session.user != null}">
                <a class="btn btn-link" href="/logout">注销</a>
            </li>
            <li class="nav-item" th:if="${session.user != null && session.user.permission.equals('admin')}">
                <a class="btn btn-link" href="/admin/page">后台</a>
            </li>
        </ul>
    </div>
</nav>
<div class="modal fade" id="loginModel" tabindex="-1" role="dialog" aria-labelledby="loginModelTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loginModalLongTitle">登录账号</h5>
                <span v-bind:class="{'badge badge-pill badge-danger':isFailed}"
                      v-bind:hidden="hiddenSpan">{{warning}}</span>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="loginForm">
                    <div class="form-group">
                        <label for="num">号码</label>
                        <input type="text" class="form-control" name="number" id="num" v-model="num"
                               placeholder="请输入手机号">
                    </div>
                    <div class="form-group">
                        <label for="pwd">密码</label>
                        <input type="password" class="form-control" name="password" id="pwd" v-model="pwd"
                               placeholder="请输入密码">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" @click="login">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="container" id="vueObject">
    <div class="row">
        <div class="col-2"></div>
        <div class="col-md-8">
            <ul class="categories">
                <li><h5>风格</h5></li>
                <li v-for="(style,index) in styles" v-if="index<=10">
                    <a href="#" @click="updateSongListByStyle(style)" class="text-info">{{style}}</a>
                </li>
            </ul>
            <ul class="categories">
                <li><h5>语种</h5></li>
                <li v-for="(lan,index) in languages" v-if="index<=10">
                    <a href="#" @click="updateSongListByLanguage(lan)" class="text-info">{{lan}}</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="divider"></div>
    <h3>分类-
        <small class="text-info">{{currentStyle}}</small>
    </h3>
    <div class="row">
        <div class="col-md-2" v-for="song in songs">
            <div class="music-panel">
                <div class="header">
                    <img v-bind:src="song.imgUri">
                    <div>
                        <a :href="'/play?id='+song.pk">
                            <i class="material-icons">play_arrow</i>
                        </a>
                        <span>播放数 {{song.click}}</span>
                    </div>
                </div>
                <div class="content" v-if="song.name.length < 15">
                    {{song.name}}
                </div>
                <div class="context" v-if="song.name.length >= 15">
                    {{song.name.substring(0,15)}}
                    <i class="material-icons">more_horiz</i>
                </div>
            </div>
        </div>
    </div>
    <div class="a" v-if="currentPage <= totalPage">
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>
                <li v-for="page in totalPage"
                    class="page-item"
                    v-if="(page > currentPage -2) && (page < 10)">
                    <a class="page-link" href="#" v-if="page != currentPage">{{page}}</a>
                    <a class="page-link active" href="#" v-if="page == currentPage">{{page}}</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<script>
    var vueObject = new Vue({
        el: '#vueObject',
        data: {
            styles: [],
            languages: [],
            songs: [],
            currentStyle: '',
            pageSize: 10,
            currentPage: 1,
            totalSize: 0,
            totalPage: 0,
        },
        mounted: function () {
            this.getCategories();
        },
        methods: {
            getCategories: function () {
                var url = '/song/category/get/all';
                $.get(url, function (data) {
                    vueObject.styles = data['style'];
                    vueObject.languages = data['language'];
                    vueObject.currentStyle = vueObject.styles[0];
                    var url = location.search; //获取url中"?"符后的字串
                    if (url.indexOf("?") != -1) {    //判断是否有参数
                        var str = url.substr(1);
                        var requestStyle = str.split('=')[1];
                        console.log('request style: ' + requestStyle);
                        if (vueObject.styles.indexOf(requestStyle) != -1) {
                            vueObject.currentStyle = requestStyle;
                        }
                    }
                    vueObject.getSongs(vueObject.currentStyle, 1, 10, 'style');
                });
            },
            getSongs: function (key, cp, pagesize, way) {
                switch (way) {
                    case 'style':
                        cp = cp - 1;
                        var url = '/song/get/style/' + key + '/page/' + cp + '/size/' + pagesize;
                        console.log('get songs....' + url);
                        $.get(url, function (data) {
                            console.log(data);
                            vueObject.songs = data['data'];
                            vueObject.currentPage = data['currentPage'];
                            vueObject.totalPage = data['totalPage'];
                            vueObject.totalSize = data['totalSize'];
                            vueObject.currentStyle = key;
                        });
                        break;
                    case 'language':
                        cp = cp - 1;
                        var url = '/song/get/language/' + key + '/page/' + cp + '/size/' + pagesize;
                        console.log('get songs....' + url);
                        $.get(url, function (data) {
                            console.log(data);
                            vueObject.songs = data['data'];
                            vueObject.currentPage = data['currentPage'];
                            vueObject.totalPage = data['totalPage'];
                            vueObject.totalSize = data['totalSize'];
                            vueObject.currentStyle = key;
                        });
                        break;
                    default:
                        break;
                }
            },
            updateSongListByStyle: function (style) {
                vueObject.getSongs(style, 1, 10, 'style');
            },
            updateSongListByLanguage: function (language) {
                console.log("updating..." + language);
                vueObject.getSongs(language, 1, 10, 'language');
            },

        },
    });

    //登陆框
    var loginModel = new Vue({
        el: '#loginModel',
        data: {
            num: "",
            pwd: "",
            isFailed: false,
            hiddenSpan: true,
            warning: '登录失败'
        },
        methods: {
            login: function () {
                loginData = {
                    number: loginModel.num,
                    password: loginModel.pwd
                }
                $.post('/login', loginData, function (result) {
                    switch (result['result']) {
                        case 'success':
                            location.href = '/';
                            break;
                        case 'failed':
                            loginModel.hiddenSpan = false;
                            loginModel.isFailed = true;
                            break;
                        default:
                            break
                    }
                });
            }
        }
    });
</script>
</body>
</html>